<template>
  <div class="login">
    <div class="tabs-box">
      <div class="tabs">
        <el-tabs v-model="activeName" type="border-card" stretch>
          <el-tab-pane label="帐号登录" name="phone">
            <template #label>
              <el-icon>
                <UserFilled />
              </el-icon>
              <span>帐号登录</span>
            </template>
            <el-form ref="formRef">
              <el-form-item label="帐号:" label-width="60px" prop="phone">
                <el-input v-model="phone" type="phone" placeholder="请输入帐号" clearable></el-input>
              </el-form-item>
              <el-form-item label="密码:" label-width="60px" prop="password">
                <el-input v-model="password" type="password" placeholder="请输入密码" show-password></el-input>
              </el-form-item>
            </el-form>

          </el-tab-pane>

          <el-tab-pane label="扫码登录" name="scan">
            <template #label>
              <el-icon>
                <Iphone />
              </el-icon>
              <span>扫码登录</span>
            </template>

            <LoginScan />

          </el-tab-pane>
        </el-tabs>

        <div class="controls">
          <el-checkbox v-model="isRemPwd" label="记住密码" size="large" />
          <el-link href="/forget/pwd" type="primary" style="text-decoration: none;">忘记密码</el-link>
        </div>

        <div class="login-btns">
          <el-button type="primary" @click.prevent="handleLogin">
            立即登录
          </el-button>
          <el-button type="primary" @click="handleRegister">
            快速注册
          </el-button>
        </div>
      </div>
    </div>
  </div>
   <!-- 底部 -->
   <div class="copyright">
      <ul>
        <li>关于我们</li>
        <li>联系我们</li>
        <li>联系客服</li>
        <li>商家入驻</li>
        <li>营销中心</li>
        <li>手机尚品汇</li>
        <li>销售联盟</li>
        <li>尚品汇社区</li>
      </ul>
      <div class="tips">地址：北京市昌平区宏福科技园区</div>
      <div class="tips">京ICP备19006430号
      </div>
    </div>


</template>

<script>
import { getLogin } from "@/api/api";
import { saveToken } from "@/utils/uuid_token";
import LoginScan from "@/views/Login/LoginScan.vue";
export default {
  name: "LoginIndex",
  components: {
    LoginScan,
  },
  data() {
    return {
      activeName: "phone",
      isRemPwd: true,
      phone: "",
      password: "",
    };
  },

  methods: {
    async handleLogin() {
      //获取用户输入
      const { phone, password } = this
      //发送请求
      const res = await getLogin({ phone, password })
      if (res.code === 200) {
        //保存token到本地
        saveToken(res.data.token)
        console.log(res.data.token)
        //跳转到首页
        this.$router.push("/home").then(() => {
          window.location.reload();
        });
        this.$message.success("登录成功")
      } else {
        this.$message.error(res.message)
      }
    },
    handleRegister() {
      this.$router.push("/register");
    },

  },
};
</script>

<style scoped>
@import '../login/login.css';

.login {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 10px;
  background: url(./images/loginbg.png) center center / cover no-repeat;
}

span {
  color: #ea4a36;
}

.tabs-box {
  width: 1200px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.tabs {
  width: 350px;
  margin: 10px;
  border-radius: 10px;
  background-color: #fff;
  border-radius: 8px;
  padding: 20px;

}

.el-tabs__nav {
  display: flex;
  justify-content: center;
  align-items: center;
}

.el-tabs__item {
  margin-right: 20px;
}

.el-tabs__item.is-active {
  color: #ea4a36;
}

.el-tabs__content {
  padding: 20px;
}

.el-icon {
  margin-right: 5px;
  color: #ea4a36;
}


.copyright {
  width: 1200px;
  margin: 0 auto;
  text-align: center;
  font-size: 20px;
}

li {
  display: inline-block;
  border-right: 1px solid #e4e4e4;
  padding: 0 20px;
  margin: 15px 0;
}
.tips {
  margin:10px
}
</style>
